<template>
  <view class="container">
    <!-- 正在进行的预约 -->
    <view class="section">
      <view class="section-title">正在进行的预约</view>
      <view v-if="ongoingAppointments.length === 0" class="empty-tip">暂无正在进行的预约</view>
      <view class="appointment-item" v-for="(item, index) in ongoingAppointments" :key="index">
        <view class="appointment-info">
          <text class="appointment-title">{{ item.title }}</text>
          <text class="appointment-time">{{ item.time }}</text>
        </view>
      </view>
    </view>

    <!-- 历史已完成的预约 -->
    <view class="section">
      <view class="section-title">历史已完成的预约</view>
      <view v-if="completedAppointments.length === 0" class="empty-tip">暂无历史已完成的预约</view>
      <view class="appointment-item" v-for="(item, index) in completedAppointments" :key="index">
        <view class="appointment-info">
          <text class="appointment-title">{{ item.title }}</text>
          <text class="appointment-time">{{ item.time }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ongoingAppointments: [],
      completedAppointments: []
    };
  },
  onShow() {
    this.loadAppointments();
  },
  methods: {
    loadAppointments() {
      // 尝试从本地存储读取预约数据
      const savedOngoing = uni.getStorageSync('ongoingAppointments');
      const savedCompleted = uni.getStorageSync('completedAppointments');
      
      // 如果本地存储有数据则使用，否则使用模拟数据
      this.ongoingAppointments = savedOngoing || [
        { title: "牙科检查", time: "2024-09-15 10:00" },
        { title: "健身课程", time: "2024-09-16 14:30" }
      ];
      
      this.completedAppointments = savedCompleted || [
        { title: "体检", time: "2024-09-01 09:00" },
        { title: "美容护理", time: "2024-09-08 16:00" }
      ];
      
      // 如果没有本地数据，则将模拟数据保存到本地
      if (!savedOngoing) {
        uni.setStorageSync('ongoingAppointments', this.ongoingAppointments);
      }
      if (!savedCompleted) {
        uni.setStorageSync('completedAppointments', this.completedAppointments);
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 15px;
  background-color: #f4f4f4;
}

.section {
  margin-bottom: 15px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.empty-tip {
  text-align: center;
  color: #999;
  padding: 10px 0;
}

.appointment-item {
  border-bottom: 1px solid #eaeaea;
  padding: 10px 0;
}

.appointment-item:last-child {
  border-bottom: none;
}

.appointment-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.appointment-title {
  font-size: 16px;
  color: #333;
}

.appointment-time {
  font-size: 14px;
  color: #999;
}
</style>